A Complete Guide For Adding MailChimp Subscription Form To Your Site.

January 28th, 2017 | by Ravi Chahar || 8 Comments |

Email marketing is one of the most effective strategies to boost the growth of your online business.

People are gathering more and more emails and building new lists. But the problem occurs when you have to play with the codes for adding the form on your website.

Most of the beginners start with MailChimp and they get stuck.

Do you know about adding MailChimp subscription form to your blog? If you don’t have any idea, don’t worry, you will learn all the possible ways.

What Should You Do To Embed The Subscription Box?

There are many email service alternatives to MailChimp.

You can choose Aweber, ConvertKit and a few more.

But if you’re going to start with MailChimp then follow the guide.

Step 1:- Create an account with MailChimp.

To start building your email list, you have to create a new list where you’re going to gather your subscribers.

Just click on the “Lists” option shown above in the menu.

A page would open and on the right side of the page, you would see “Create List” button. Click on that.

Step 2:- There would be many fields to enter the data of your list. The name of a list which would appear with your subscription form.

Fill an email address from which you want to send your newsletter.

It’s always recommended to choose your email address which was created with your domain name. You should know how to create email in cPanel.

It’s more authentic. Save the data after filling the details.

Step 3:- You would see that the name of your list is at the top and many options are there in the navigation menu.

Click on “Signup Forms” and it will take you to a new page.

Step 4:- MailChimp provides you many options to create a sign-up form. If you want to add a link to any button so that when people click on that button and they reach to the subscription form then choose the first option.

Click on “General forms”.

Step 5:- At this page, you will see the sign-up form URL which can be used while creating a button using HTML.

You will see many options including the design of the form. You can even add extra form inputs from ZIP code to numbers.

You can easily design the sign-up form. No coding required.

Just the simple change of the colors using the Hex code values. You can use any color picker to choose the Hex value of your favorite color.

Step 6:- After finishing the designing, you have to copy the sign-up URL you saw in the previous step

Now you have to develop a sign-up button using HTML and link that button to this URL.

I have used the different URL as shown in the screenshot because of the different list.

Let me provide you the HTML code.

In the form, I have used the HTML 5. You can als use the older version of HTML in which you can create the button using the <input> fields.

The result would be like this.

Let me add a little bit of CSS for the button.

style=”border: none; padding: 10px; background-color: #f18902; color: white;

width: 100%; border-radius: 5%;”

The result would be like this.

In the form code, you just have to replace the sign-up URL.

formaction=”URL”

If you’re a tech savvy person then it won’t be a problem. You can use CSS to design the button accordingly.

You have successfully added a sign-up button to your website.

How Would You Add The Complete Sign-up Form To Your Website?

This is the best method for the people who are afraid of the codes.

You just have to copy and paste the code. But to design the complete sign-up form, you have to do some designing.

Let me start it.

• Follow the guide from Step 1 to Step 3 and rest take the steps mentioned below.

Step 1:- After opening the “Sign up form” section, you have to choose the form type.

In the previous method, you have chosen the “General Form” option. But now, you have to click on the “Embedded Forms” option.

It’s because it will generate the full HTML code for the subscription form which can be used anywhere on your website.

Step 2:- There are basically three types of forms. Classic, Slim, and Horizontal.

You can choose any according to your requirement.

For each form, you will see the development option in the left side menu. The preview of the form will be showing in the right side of the page.

Try to develop the form accordingly.

If you want to add any extra field, you can do that. You can also remove any field.

The best option is to choose the Slim or Horizontal forms. They only show the email field and the submit button.

Step 3:- After finishing all structural process of the form, you have to copy the code shown below the preview of the form.

Just copy that HTML code and paste it on your website.

There would also be some JavaScript for the field validation. You can disable it if you want. Otherwise, copy the exact code shown in the box.

Step 4:- Open your WordPress admin panel and go to Appearance>>Widgets and add a text widget in the sidebar.

Paste the code in that box and save.

You will see your default MailChimp box you designed.

For better design, you have to take some help from any web designer. I have used the same code but changed the HTML classes to target using CSS.

You can see the result in the sidebar of this blog.

NOTE:- To design is mobile-friendly, you should use the CSS Media queries. Only a web designer should do that.

The designing process is required only if you want to have a better design than the default MailChimp form.

Adding MailChimp Subscription Form Using A Plugin.

Many people have requested to have a guide which doesn’t contain any kind of coding. I am going to provide that.

Just follow the steps.

First of all, like you did in the first method. Create a list.

Step 1:- Install and activate MailChimp for WordPress plugin.

Step 2:- Go to MailChimp For WP>>MailChimp from your WordPress dashboard. Just like any other plugin, you would see a separate option below settings.

A page would open and you would see that the status of the plugin is “Not connected”. It’s because you have to integrate this plugin with your MailChimp account.

Click on the “Get Your API Key” link.

It would take you to a page where you a have to create the API keys for your account.

If you get confused then just login to your MailChimp account.

Step 3:- Click on your image shown in the top-right corner and open “Account”. A New page would open.

Here you would see a navigation menu in the middle of the page. Click on the “Extras>>API keys”.

It will take you to another page.

Step 4:- If you have already created any API key then you would see the list. But if you haven’t then you have to create a new one.

Click on the “Create a Key” button.

Step 4:- MailChimp would ask about the list you want to choose. Just choose the list you have created before and within a second, the API key would on your screen.

Copy the API key and paste those keys in your plugin.

Step 5:- After filling the API keys, save the settings and the status would turn to “Connected” with a green signal.

Step 6:- Now is the time to handle the forms. Go to MailChimp for WP>>Forms and you will see many options.

You can add any extra form field using the buttons.

It would show you the HTML code for that form.

Either you copy and paste that HTML code in the sidebar, footer etc or you can use the shortcode shown below the form code box.

Just copy that shortcode and paste it in any post, page, sidebar widget.

Step 7:- I have added two form fields. The name and an email box with a submit button.

Let me show you the result.

You can change that from the forms’ settings page and use the new shortcode.

The process of adding MailChimp Subscription form has finished.

Congrats, you have successfully integrated your MailChimp account with your WordPress website.

Which Method Would You Choose For Adding MailChimp Subscription Form?

I have experienced that people are so afraid of the codes and they should. For beginners, it’s very important to take each step carefully.

And they should definitely follow the email marketing startegy.

For newbies, I would recommend the plugin method for sure. It’s easy, fast and no risk.

But if you’re good with codes then the above two methods would be your friends. Do you have any plan in your mind?

For adding MailChimp Subscription form, which method would be your favorite method? Are you going to hire any web developer/designer?

Feel free to drop your suggestions in the comments.

You can also connect with us on Twitter, LinkedIn, and Facebook.